<template>
  <div class="filters">
    <span
      class="filter"
      :class="{ active: selected === filter.value }"
      v-for="filter in filters"
      :key="filter.value"
      @click="$emit('change-filter', filter.value)"
    >
      {{ filter.label }}
    </span>
  </div>
</template>

<script setup>
const props = defineProps({
  selected: String,
});
const emit = defineEmits(["change-filter"]);

const filters = [
  {
    label: "ALL",
    value: "all",
  },
  {
    label: "DONE",
    value: "done",
  },
  {
    label: "TODO",
    value: "todo",
  },
];
</script>

<style scoped></style>
